<template>
  <div id="main" ref="main"></div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.barChart();
  },
  methods: {
    barChart() {
      const myChart = echarts.init(this.$refs.main);
      const option = {
        title: {
          text: "故障时长（单位：小时）",
          subtext: "时间：06月",
          left: "center"
        },
        legend: {
          data: ["故障时长", "故障次数"],
          bottom: 0
        },
        grid: { // 柱状图偏移位置设置
            left: '20%'
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月"]
        },
        yAxis: {
          type: "value",
          name: "故障时长",
          min: 0,
          max: 48,
          interval: 12,
          nameLocation: "middle",
          nameGap: 60,
          data: ["0小时", "12小时", "24小时"],
          axisLabel: {
            formatter: "{value} 小时"
          }
        },
        series: [
          {
            name: "故障时长",
            type: "bar",
            data: [24, 12]
          },
          {
            name: "故障次数",
            type: "line",
            // yAxisIndex: 1,
            data: [12, 36]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>